<template>
    <el-dialog
        :title="title"
        :visible.sync="is_show"
        @closed="closed"
        center
        width="650px"
    >
        <el-form
            label-position="left"
            ref="form"
            :rules="rules"
            label-width="100px"
            :model="form">
            <el-form-item
                label="代理人"
                prop="agent_id">
                <el-select
                    v-model="form.agent_id"
                    placeholder="请选择代理人"
                >
                    <el-option
                        v-for="item in agentOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                :label="type == 'reward' ? '奖励理由' : '惩戒理由'"
                prop="reason">
                <el-input v-model="form.reason"></el-input>
            </el-form-item>
            <el-form-item
                :label="type == 'reward' ? '奖励金额' : '惩戒金额'"
                prop="reward">
                <el-input v-model="form.reward" type="number"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="is_show = false">取 消</el-button>
            <el-button
                type="primary"
                @click="submit"
                v-no-more-click:3000
            >确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            is_show: false,
            type: 'reward',
            form: {
                reward: '',
                reason: ''
            },
            title: '案件奖励',
            rules: {
                agent_id: [{ required: true, message: '请选择代理人', trigger: 'blur' }],
                reason: [{ required: true, message: '请输入理由', trigger: 'blur' },],
                reward: [{ required: true, message: '请输入金额', trigger: 'blur' },]
            }
        }
    },

    props: {
        agentOptions: {
            type: Array,
            default: () => []
        }
    },

    watch: {
        agentOptions: {
            handler: function(val) {
            },
            immediate: true,
            deep: true
        }
    },

    methods: {
        closed() {
            Object.assign(this.$data, this.$options.data())
            this.$refs['form'].resetFields()
        },
        showOn(type) {
            this.type = type
            if (this.type == 'publish') {
                this.title = '案件惩戒'
            }
            this.is_show = true
            this.$nextTick(() => {
                this.$refs['form'].clearValidate()
            })
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.type == 'reward') {
                        this.rewardPost()
                    } else {
                        this.publishPost()
                    }
                }
            })
        },
        publishPost() {
            let params = {
                agent_id: this.form.agent_id,
                deduction_price: this.form.reward,
                name: this.form.reason
            }
            this.$axios.post('/api/deduction/agent_deduction', params).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                    this.$emit('refresh')
                    this.is_show = false
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
        rewardPost() {
            let params = {
                agent_id: this.form.agent_id,
                reason: this.form.reason,
                reward: this.form.reward
            }
            this.$axios.post('/api/rewardRecord/agent_reward_record', params).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                    this.$emit('refresh')
                    this.is_show = false
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        }
    }

};
</script>

<style lang="less" scoped>
/deep/.el-select {
    width: 100%;
}
</style>
